

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=620">
<title>HTML5 Demo: Drag and drop, automatic upload</title>
<link rel="stylesheet" href="css/html5demos.css">
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-ui-1.8.2.custom.min.js"></script>

</head>
<body>
	<section id="wrapper">

		<header>
			<h1>Drag and drop, automatic upload</h1>
		</header>

		<style>
#holder {
	border: 10px dashed #ccc;
	width: 400px;
	min-height: 300px;
	margin: 20px auto;
}

#holder.hover {
	border: 10px dashed #0c0;
}

#holder img {
	display: block;
	margin: 10px auto;
}

#holder p {
	margin: 10px;
	font-size: 14px;
}

progress {
	width: 100%;
}

progress:after {
	content: '%';
}

.fail {
	background: #c00;
	padding: 2px;
	color: #fff;
}

.hidden {
	display: none !important;
}
</style>
		<form enctype="multipart/form-data"
			action="<%=request.getContextPath()%>/Main" method="post">
			<table>
				<tr>
					<td><b>Choose the file To Upload:</b></td>
					<td><input name="file" type="file" id="files"/></td>
				</tr>
			</table>
			<table>
				<tr>
					<td><input type="button" id="submit" value="Send File"
						></td>
					<td><input type="button" id="clear" value="Clear Image"
						></td>
				</tr>
			</table>
			<article>
				<div id="holder"></div>
				<p id="upload" class="hidden">
					<label>Drag &amp; drop not supported, but you can still
						upload via this input field:<br> <input type="file"
						id="fileselect" name="fileselect[]" multiple="multiple" /> </label>
				</p>
				<p id="filereader">File API &amp; FileReader API not supported</p>
				<p id="formdata">XHR2's FormData is not supported</p>
				<p id="progress">XHR2's upload progress isn't supported</p>
				<p>
					Upload progress:
					<progress id="uploadprogress"  max="100" value="0">0</progress>
				</p>
				
			</article>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/seam.js"></script>
		</form>
</body>
</html>